<template>
<view class="form">
  <view class="form-item" v-for="(item, index) in formData" :key="index">
    <text class="label">{{ item.label }}</text>
    <view class="input-wrapper">
      <input v-if="item.type === 'input'" v-model="formData[index].value" :placeholder="item.placeholder" :type="item.inputType" />
      <textarea v-else-if="item.type === 'textarea'" v-model="formData[index].value" placeholder="请填写您的优势"></textarea>
      <image v-else-if="item.type === 'avatar'" :src="formData[index].value" class="avatar"></image>
    </view>
  </view>

  <view class="submit-btn-wrapper">
    <button class="submit-btn" @click="submitForm">保存</button>
  </view>
</view>

</template>

<script>
  import { onMounted, ref } from 'vue';
  // import { useRouter } from 'uni-simple-router';
  
  export default {
    setup() {
      const router = useRouter();
      // 表单数据
      const formData = ref([
        {
          label: '头像',
          type: 'avatar',
          value: 'https://example.com/avatar.jpg' // 这里替换为实际头像地址
        },
        {
          label: '昵称',
          type: 'input',
          inputType: 'text',
          placeholder: '请输入昵称',
          value: '王长城'
        },
        {
          label: '性别',
          type: 'input',
          inputType: 'text',
          placeholder: '请输入性别',
          value: '男'
        },
        {
          label: '年龄',
          type: 'input',
          inputType: 'number',
          placeholder: '请输入年龄',
          value: '不显示'
        },
        {
          label: '工作年限(年)',
          type: 'input',
          inputType: 'number',
          placeholder: '请输入工作年限',
          value: '10'
        },
        {
          label: '电话',
          type: 'input',
          inputType: 'number',
          placeholder: '请输入电话',
          value: '18788888888'
        },
        {
          label: '邮箱',
          type: 'input',
          inputType: 'email',
          placeholder: '请输入邮箱',
          value: 'YCH23243@126.com',
          extraText: '建议用邮箱传送文件并抄送小匠邮箱XXXXX，方便查看记录'
        },
        {
          label: '微信号',
          type: 'input',
          inputType: 'text',
          placeholder: '请输入微信号',
          value: 'YCH2324'
        },
        {
          label: '地址',
          type: 'input',
          inputType: 'text',
          placeholder: '请输入地址',
          value: '未填写'
        },
        {
          label: '个人介绍',
          type: 'textarea',
          value: ''
        }
      ]);
  
      const goBack = () => {
        router.back();
      };
  
      const submitForm = (e) => {
        e.preventDefault();
        // 这里可以添加保存数据到后端的逻辑，比如使用uni.request发送请求
        console.log('提交的表单数据', formData.value);
        // 示例：假设保存成功后返回上一页
        router.back();
      };
  
      return {
        formData,
        goBack,
        submitForm
      };
    }
  };
</script>

<style scoped>
  .profile-page {
    background-color: #f5f5f5;
    padding-top: var(--status-bar-height);
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding: 0 30rpx;
    background-color: #c5e4e7;
    color: #000;
  }
  
  .back {
    font-size: 40rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: 500;
  }
  
  .more {
    display: flex;
    align-items: center;
  }
  
  form {
    background-color: #fff;
    padding: 30rpx;
    margin-top: 30rpx;
    border-radius: 10rpx;
  }
  
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
  }
  
  .label {
    font-size: 30rpx;
    color: #666;
  }
  
  .input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .input-wrapper input,
  .input-wrapper textarea {
    font-size: 30rpx;
    color: #333;
    border: none;
    outline: none;
  }
  
  .input-wrapper textarea {
    width: 100%;
    min-height: 120rpx;
    margin-top: 10rpx;
  }
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  
  .extra-text {
    font-size: 24rpx;
    color: #00b050;
    margin-top: 10rpx;
  }
  
  .submit-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50rpx;
  }
  
  .submit-btn {
    width: 90%;
    height: 80rpx;
    background-color: #00b050;
    color: #fff;
    border: none;
    border-radius: 50rpx;
    font-size: 36rpx;
  }
</style>